<!-- 此页面代码没用到 -->
<template>
  <div class="clear-mg">
    <InnerPageTable ref="userTable" :config="userTableConfig">
      <Form
        :model="formSearch"
        ref="roleFormSearch"
        slot="search-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="userCode" :label="$t('module.userManage.account')">
          <Input type="text" v-model="formSearch.userCode" placeholder :maxlength="30" ></Input>
        </Form-item>
        <Form-item prop="userName" :label="$t('module.userManage.name')">
          <Input type="text" v-model="formSearch.userName" placeholder :maxlength="30" ></Input>
        </Form-item>
        <Form-item prop="enabled" :label="$t('common.status')">
          <Select v-model="formSearch.enabled"  clearable>
            <Option value="1">{{$t('common.enable')}}</Option>
            <Option value="0">{{$t('common.disable')}}</Option>
          </Select>
        </Form-item>
      </Form>
      <RPButton optType="create" @click="addUser()" />
      <RPButton slot="table-bar" optType="delete" @click="deleteUser" />
    </InnerPageTable>

    <!-- 添加用户列表 -->
    <Modal v-model="modal" width="800">
      <div class="run-mod-box" style=" overflow: auto;">
        <InnerPageTable
          class="clear-mg"
          ref="searchUserTable"
          :config="searchTableConfig"
          style="margin-top:30px;"
        >
          <Form
            :model="addUserFormSearch"
            ref="otherUserOfRoleForm"
            slot="search-bar"
            label-position="top"
            class="ivu-form-no-margin-bottom"
            inline
            style="width:100%;"
          >
            <Form-item prop="userCode" :label="$t('module.userManage.account')">
              <Input
                type="text"
                v-model="addUserFormSearch.userCode"
                placeholder
                style="width:148px"
                :maxlength="30"
                
                @on-enter="searchOtherUser"
              ></Input>
            </Form-item>
            <Form-item prop="userName" :label="$t('module.userManage.name')">
              <Input
                type="text"
                v-model="addUserFormSearch.userName"
                placeholder
                style="width:148px"
                :maxlength="30"
                
                @on-enter="searchOtherUser"
              ></Input>
            </Form-item>
            <Form-item prop="enabled" :label="$t('common.status')">
              <Select
                v-model="addUserFormSearch.enabled"
                
                clearable
                @on-change="searchOtherUser"
              >
                <Option value="1">{{$t('common.enable')}}</Option>
                <Option value="0">{{$t('common.disable')}}</Option>
              </Select>
            </Form-item>
            <div
              class="action-bar-buttons"
              style="margin-top: 4px;display: inline-block;float: right;"
            >
              <RPButton optType="search" @click="searchOtherUser" />
              <RPButton optType="reset" @click="reSetSearchOtherUser" />
            </div>
          </Form>
        </InnerPageTable>
      </div>
      <div slot="footer" class="run-modal-ftbButton">
        <RPButton optType="confirm" @click="addUserToRole()" />
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  roleUserMgQueryUserOfRole,
  roleUserMgQueryOtherUserOfRole,
  roleUserMgAddUserToRole,
  roleUserMgDeleteUserFromRole
} from "@/api/roleApi.js";
import { userlistColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      formSearch: {
        roleId: this.roleId,
        userCode: "",
        userName: "",
        enabled: ""
      },
      addUserFormSearch: {
        roleId: this.roleId,
        userCode: "",
        userName: "",
        enabled: ""
      },
      modal: false,
      saveLoading: false,
      baseData: [],
      currnodeId: "CR000",
      userListStore: {},
      userList: [],
      selectList: [],
      defaultProps: {
        children: "children",
        label: "name",
        depId: "CR000"
      }
    };
  },
  computed: {
    userTableConfig() {
      return { loadDataFn: roleUserMgQueryUserOfRole, columnsFn: userlistColumns.bind(this) };
    },
    searchTableConfig() {
      return { loadDataFn: roleUserMgQueryOtherUserOfRole, columnsFn: userlistColumns.bind(this), autoFirst: false };
    }
  },
  created() {
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.search"),
        theme: "warning",
        icon: "search",
        handle: this.search
      },
      {
        text: this.$t("common.reset"),
        theme: "info",
        icon: "loop",
        handle: this.formReset
      }
    ]);
  },

  methods: {
    search(page) {
      this.$refs["userTable"].load(this.formSearch, page);
    },
    searchOtherUser(page) {
      this.$refs["searchUserTable"].load(this.addUserFormSearch, page);
    },
    reSetSearchOtherUser(page) {
      this.$refs["otherUserOfRoleForm"].resetFields();
      this.searchOtherUser(1);
    },
    addUser() {
      this.modal = true;
      this.$refs["otherUserOfRoleForm"].resetFields();
      this.searchOtherUser(1);
    },
    addUserToRole() {
      let deleteStr = this.getIds("searchUserTable");
      if (deleteStr == "" && typeof id != "string") {
        this.$message.error({
          content: this.$t("module.role.warning.selectUsers"),
          duration: 1.5
        });
        return;
      }

      // $store
      //   .dispatch("RoleUserMgAddUserToRole", {
      //     roleId: this.roleId,
      //     userIds: deleteStr
      //   })
      roleUserMgAddUserToRole({
        roleId: this.roleId,
        userIds: deleteStr
      }).then(res => {
        if (res.data.statusCode == 0) {
          this.$message.success({
            content: this.$t("module.role.warning.createSuccessfully"),
            duration: 3
          });
          this.search();
          this.modal = false;
          return;
        } else {
          this.$message.error({
            content: res.data.msg,
            duration: 3
          });
        }
      });
    },
    deleteUser() {
      let deleteStr = this.getIds();
      if (deleteStr == "") {
        this.$message.error({
          content: this.$t("module.userManage.warning.selectDeleteUser"),
          duration: 1.5
        });
        return;
      }
      new $confirm(this.$t("module.userManage.warning.ensureToDelete"), this).then(() => {
        // $store
        //   .dispatch("RoleUserMgDeleteUserFromRole", {
        //     roleId: this.roleId,
        //     userIds: deleteStr
        //   })
        roleUserMgDeleteUserFromRole({
          roleId: this.roleId,
          userIds: deleteStr
        }).then(res => {
          if (res.data.statusCode == 0) {
            this.$message.success({
              content: this.$t("module.userManage.warning.deleteSuccessfully"),
              duration: 3
            });
            this.search();
            return;
          } else {
            this.$message.error({
              content: res.data.msg,
              duration: 3
            });
          }
        });
      });
    },
    getIds(tableName) {
      tableName = tableName == undefined ? "userTable" : tableName;

      let list = this.$refs[tableName].getSelectioned() || [];
      let ids = [];
      for (let u of list) {
        ids.push(u.userId);
      }
      return ids.join(",");
    },
    formReset() {
      this.$refs["roleFormSearch"].resetFields();
      this.search(1);
    },
    userTypeText(type) {
      switch (type) {
        case 0:
          return this.$t("module.userManage.systemUser");
        case 1:
          return this.$t("module.userManage.LDAPUser");
        case 2:
          return this.$t("module.userManage.customUser");
        default:
          return "";
      }
    }
  }
};
</script>
<style lang="less">
.transfer-panel-empty {
  display: block;
  color: #b4bccc;
}
.group-person-item + .transfer-panel-empty {
  display: none;
}
.group-person-select + .transfer-panel-empty {
  display: none;
}
.group-person-select {
  width: 100%;
  padding: 5px 10px;
  margin-bottom: 1px;
}
</style>